<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			[v-cloak]{
				display:none ;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--使用v-cloak可以解决 差值表达式的闪烁问题-->
			<p v-cloak>++++{{msg}}----</p>
			<h1 v-text="msg">++++----</h1>
			<!--v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己这个占位符,
				不会把整个元素的内容清空
			-->
			<!--v-text中html标签不起作用-->
			<p>{{msg2}}</p><br/>
			<p v-text="msg2"></p><br/>
			<p v-html="msg2"></p>
			<!--v-html中html标签起作用-->
			
			<h3>v-bink：使用</h3>
			<input type="button" value="按钮1" title="mytitle">
			<!-- v-bind:是Vue中，提供用于绑定属性的指令-->
			<input type="button" value="按钮2" v-bind:title="mytitle">
			<!--v-bind 中，可以写合法的js表达式-->
			<input type="button" value="按钮3" v-bind:title="mytitle+'123'">
			<!-- v-bind指令可以被简写为 ：-->
			<input type="button" value="按钮4" :title="mytitle">
			
			<br />
			
			<h3>v-on使用</h3>
			<!--v-on:Vue中提供的事件绑定机制
				使用Vue 对象 的methods 属性
			-->
			<!--通过v-on事件绑定 click-->
			<input type="button" value="v-on点击" v-on:click="show"/> 
			<!----v-on 的缩写：@ -->
			<input type="button" value="v-on缩写点击" @click="show"/> 
		</div>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script>
			var vue=new Vue({
				el:"#app",
				data:{
					msg:"123",
					msg2:"<h2>哈哈,我是h2，我比较大大的吧</h2>",
					mytitle:"这是衣蛾没有title，用于v-bind测试"
				},
				methods:{
					show:function(){
						alert("hello，v-on操作");
					}
				}
			});
			
		</script>
	</body>
</html>
